<template>
    <div>
        <!--商机信息-->
        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;height: 140px">
            <!--上-->
            <div>
                <el-row :gutter="20" style="height:41px">
                    <el-col :span="6" style="padding-top: 5px">
                        <i class="el-icon-s-check" style="padding-left: 0px;font-size: 25px;"></i>
                        <span style="font-weight: bold;font-size: 18px;margin-left: 10px">{{dindanlist.orderNo}}</span>
                    </el-col>
                    <el-col :span="6" :offset="12">
                        <el-button class="el-icon-edit" style="margin-left: 100px">编辑</el-button>
                        <el-button class="el-icon-back">返回</el-button>
                    </el-col>
                </el-row>
            </div>
            <!--下-->
            <div style="border-top: 1px solid #DDDDDD;margin-top: 10px">
                <div style="height: 150px;margin-left: 10px;color: #BFBFBF">
                    <el-row type="flex" :gutter="20" style="margin-top: 20px">
                        <el-col :span="2">
                            <span style="color: gray">主题：</span>
                        </el-col>
                        <el-col :span="10">
                            <span style="color: black">{{dindanlist.orderTheme}}</span>
                        </el-col>
                        <el-col :span="2">
                            <span style="color: gray">订单号：</span>
                        </el-col>
                        <el-col :span="4">
                            <span style="color: black">{{dindanlist.orderNo}}</span>
                        </el-col>
                    </el-row>
                    <el-row type="flex" :gutter="20" style="margin-top: 15px">
                        <el-col :span="2">
                            <span style="color: gray">对应合同：</span>
                        </el-col>
                        <el-col :span="10">
                            <span style="color: black">{{dindanlist.conId.conTheme}}</span>
                        </el-col>
                        <el-col :span="2">
                            <span style="color: gray">对应客户：</span>
                        </el-col>
                        <el-col :span="4">
                            <span style="color: black">{{dindanlist.clientId.clientName}}</span>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <!--进度详情-->
        <div style="margin-top: 10px;border: 1px solid #BFBFBF;background-color: white;">
            <div>
                <template>
                    <el-tabs v-model="activeName2" type="card">
                        <el-tab-pane label="基本信息" name="first" style="height: 410px;">
                            <div class="shugan" style="margin-left: 20px;"></div>
                            <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                            <el-form v-model="dindanlist" style="margin-left: 20px;" :label-position="labelPosition" >
                                <div>
                                    <div style="height: 150px;margin-left: 10px;">
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="3">
                                                <span style="color: gray">总金额：</span>
                                            </el-col>
                                            <el-col :span="9">
                                                <span style="color: black">{{dindanlist.orderTotal}}</span>
                                            </el-col>
                                            <el-col :span="3">
                                                <span style="color: gray">剩余回款金额：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{dindanlist.orderReturned }}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="3">
                                                <span style="color: gray">开票金额：</span>
                                            </el-col>
                                            <el-col :span="9">
                                                <span style="color: black">{{dindanlist.orderInvoice}}</span>
                                            </el-col>
                                            <el-col :span="3">
                                                <span style="color: gray">利润：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{dindanlist.orderGross}}</span>
                                            </el-col>
                                        </el-row>

                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                            <el-col :span="3">
                                                <span style="color: gray">是否换货：</span>
                                            </el-col>
                                            <el-col :span="9">
                                                <span style="color: black">{{dindanlist.orderExchange}}</span>
                                            </el-col>
                                            <el-col :span="3">
                                                <span style="color: gray">是否退货：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{dindanlist.orderReturn}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                            <el-col :span="3">
                                                <span style="color: gray">交付状态：</span>
                                            </el-col>
                                            <el-col :span="9">
                                                <span style="color: black">{{dindanlist.orderJfzt}}</span>
                                            </el-col>
                                            <el-col :span="3">
                                                <span style="color: gray">回款状态：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{dindanlist.orderHkzt}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                            <el-col :span="3">
                                                <span style="color: gray">订单状态：</span>
                                            </el-col>
                                            <el-col :span="9">
                                                <span style="color: black">{{dindanlist.orderState}}</span>
                                            </el-col>
                                            <el-col :span="3">
                                                <span style="color: gray">负责人：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{dindanlist.orderPeople}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                            <el-col :span="3">
                                                <span style="color: gray">下单时间：</span>
                                            </el-col>
                                            <el-col :span="9">
                                                <span style="color: black">{{dindanlist.orderTime | formatDate}}</span>
                                            </el-col>
                                            <el-col :span="3">
                                                <span style="color: gray">完成时间：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{dindanlist.orderWctime | formatDate}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                            <el-col :span="3">
                                                <span style="color: gray">备注：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{dindanlist.orderRemark}}</span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="产品详情" name="second">
                            <div>
                                <!--产品信息-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="dindanxqlist"
                                                style="width: 100%"
                                                max-height="380"
                                               >
                                            <el-table-column
                                                    align="center"
                                                    label="产品规格">
                                                <template slot-scope="s">
                                                    <span v-for="pro in s.row.prodetailId.qmodeldetails" :key="pro.prodetailId">
                                                        {{pro.modetContent}}
                                                    </span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    prop="prodetailId.prodetaiJpri"
                                                    label="进价">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="售价"
                                                    prop="orderdetailJg">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="数量"
                                                    prop="orderdetailNumber">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="折扣"
                                                    prop="orderdetailDiscount">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    prop="orderdetailTital"
                                                    label="合计">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 800px;;font-size: 13px">
                                        <span>
                                            产品合计(元):
                                        </span>
                                        <span style="color: #BFBFBF">
                                             {{dindanlist.orderTotal}}
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="交付计划" name="fourth">
                            <div>
                                <!--交付计划-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--添加交付计划-->
                                    <div>
                                        <el-button style="margin-left: 880px" size="small" type="primary" plain>新增计划</el-button>
                                    </div>
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="jiaofujihua"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                    prop="deliveryId"
                                                    fixed
                                                    label="计划ID"
                                                    sortable
                                                    align="center"
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    label="主题"
                                                    align="center"
                                                    width="100">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.deliveryTheme" class="businame"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="客户"
                                                    align="center"
                                                    width="100">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.clientId.clientName" class="businame"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="deliveryMoney"
                                                    label="产品总价"
                                                    align="center"
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    label="计划交付日期"
                                                    align="center"
                                                    width="180">
                                                <template slot-scope="d">
                                                {{d.row.deliveryTime | formatDate}}
                                            </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="deliveryIssue"
                                                    label="期次"
                                                    align="center"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="deliveryRemark"
                                                    label="备注"
                                                    align="center"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="deliveryOwner"
                                                    label="所有者"
                                                    align="center"
                                                    width="100">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 690px;;font-size: 13px">
                                        <span>
                                             {{this.jiaofujihua.length}}条交付计划
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="回款计划" name="six">
                            <div>
                                <!--回款计划-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--添加回款计划-->
                                    <div>
                                        <el-button style="margin-left: 880px" size="small" @click="showprotab" type="primary" plain>新增计划</el-button>
                                    </div>
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="hueikuan"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                    type="selection"
                                                    width="50"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    fixed
                                                    prop="returnedmoneyId"
                                                    label="ID"
                                                    sortable
                                                    align="center"
                                                    width="60">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyTheme"
                                                    label="主题"
                                                    sortable
                                                    align="center"
                                                    width="160">
                                            </el-table-column>
                                            <el-table-column
                                                    label="客户"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.clientId.clientName" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyMoney"
                                                    label="金额"
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    label="计划回款日期"
                                                    align="center"
                                                    sortable
                                                    width="180">
                                                <template slot-scope="d">
                                                    {{d.row.returnedmoneyTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyIssue"
                                                    label="期次"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyRetuen"
                                                    label="是否回款"
                                                    sortable
                                                    align="center"
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyBuck"
                                                    label="外币备注"
                                                    align="center"
                                                    sortable
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyRate"
                                                    label="与人民币汇率"
                                                    align="center"
                                                    sortable
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyPayment"
                                                    label="支付方式"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyOwner"
                                                    label="所有者"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyRemark"
                                                    label="备注"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 700px;;font-size: 13px">
                                        <span>
                                            已回款金额:
                                        </span>
                                        <span style="color: #BFBFBF">
                                             30000元
                                        </span>
                                        <span>
                                            剩余
                                        </span>
                                        <span style="color: #BFBFBF">
                                             1064128.00元
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="退款计划" name="six2">
                            <div>
                                <!--回款计划-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--添加回款计划-->
                                    <div>
                                        <el-button style="margin-left: 880px" size="small" @click="showprotab" type="primary" plain>新增计划</el-button>
                                    </div>
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="tueikuan"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                    type="selection"
                                                    width="50"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    fixed
                                                    prop="returnedmoneyId"
                                                    label="ID"
                                                    sortable
                                                    align="center"
                                                    width="60">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyTheme"
                                                    label="主题"
                                                    sortable
                                                    align="center"
                                                    width="160">
                                            </el-table-column>
                                            <el-table-column
                                                    label="客户"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.clientId.clientName" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="退货单"
                                                    sortable
                                                    align="center"
                                                    width="150"
                                                    prop="returgoodId.returgoodTheme">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyMoney"
                                                    label="金额"
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    label="计划回款日期"
                                                    align="center"
                                                    sortable
                                                    width="130">
                                                <template slot-scope="d">
                                                    {{d.row.returnedmoneyTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyIssue"
                                                    label="期次"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyRetuen"
                                                    label="是否退款"
                                                    sortable
                                                    align="center"
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyBuck"
                                                    label="外币备注"
                                                    align="center"
                                                    sortable
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyRate"
                                                    label="与人民币汇率"
                                                    align="center"
                                                    sortable
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyPayment"
                                                    label="支付方式"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyOwner"
                                                    label="所有者"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returnedmoneyRemark"
                                                    label="备注"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 700px;;font-size: 13px">
                                        <span>
                                            已回款金额:
                                        </span>
                                        <span style="color: #BFBFBF">
                                             30000元
                                        </span>
                                        <span>
                                            剩余
                                        </span>
                                        <span style="color: #BFBFBF">
                                             1064128.00元
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="开票记录" name="sex">
                            <div>
                                <!--开票记录-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--添加记录-->
                                    <div>
                                        <el-button style="margin-left: 880px" size="small" @click="showprotab" type="primary" plain>新增记录</el-button>
                                    </div>
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="kaipiao"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                    type="selection"
                                                    width="50"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    fixed
                                                    prop="invoiceId"
                                                    label="ID"
                                                    sortable
                                                    align="center"
                                                    width="60">
                                            </el-table-column>
                                            <el-table-column
                                                    fixed
                                                    label="客户"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.clientId.clientName" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoiceContent"
                                                    label="开票内容"
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoiceType"
                                                    label="票据类型"
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoiceMoney"
                                                    label="票据金额"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoiceNumber"
                                                    label="发票号码"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    label="开票日期"
                                                    align="center"
                                                    width="180">
                                                <template slot-scope="d">
                                                    {{d.row.invoiceTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoicePerson"
                                                    label="经手人"
                                                    align="center"
                                                    sortable
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    label="回款记录"
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.returnedmoneylogId.returnedmoneylogTheme" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoiceRemark"
                                                    label="备注"
                                                    align="center"
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    fixed="right"
                                                    label="操作"
                                                    align="center"
                                                    width="100">
                                                <template slot-scope="d">
                                                    <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                                    <i style="font-size:18px;color: #409EFF" @click="xiugai(d.row)" class="el-icon-edit"></i>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 850px;;font-size: 13px">
                                        <span>
                                            已开发票:
                                        </span>
                                        <span style="color: #BFBFBF">
                                             106个
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="退货" name="eight">
                            <div>
                                <!--回款记录-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--添加回款记录-->
                                    <div>
                                        <el-button style="margin-left: 880px" size="small" @click="showprotab" type="primary" plain>新增记录</el-button>
                                    </div>
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="tueihuo"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                    fixed
                                                    prop="returgoodId"
                                                    label="ID"
                                                    sortable
                                                    align="center"
                                                    width="60">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderTheme"
                                                    label="主题"
                                                    sortable
                                                    align="center"
                                                    width="160">
                                            </el-table-column>
                                            <el-table-column
                                                    label="客户"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.clientId.clientName" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="退货日期"
                                                    align="center"
                                                    sortable
                                                    width="180">
                                                <template slot-scope="d">
                                                    {{d.row.returgoodTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returgoodYreimburse"
                                                    label="应退款"
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    label="已退款"
                                                    sortable
                                                    align="center"
                                                    width="150"
                                                    prop="returgoodReimburse">
                                            </el-table-column>
                                            <el-table-column
                                                    label="退入仓库"
                                                    sortable
                                                    align="center"
                                                    width="150"
                                                    prop="returgoodWarehouse">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returgoodTkstate"
                                                    label="退款状态"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returgoodRkstate"
                                                    label="入库状态"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returgoodState"
                                                    label="退货单状态"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returgoodRemark"
                                                    label="备注"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="returgoodPeople"
                                                    label="负责人"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 690px;;font-size: 13px">
                                        <span>
                                            剩余回款金额:
                                        </span>
                                        <span style="color: #BFBFBF">
                                            20200125元
                                        </span>
                                        <span>
                                            总记录
                                        </span>
                                        <span style="color: #BFBFBF">
                                             1064条
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="换货" name="nine">
                            <div>
                                <!--开票记录-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--添加记录-->
                                    <div>
                                        <el-button style="margin-left: 880px" size="small" @click="showprotab" type="primary" plain>新增记录</el-button>
                                    </div>
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="huanhuo"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                    fixed
                                                    prop="barterNo"
                                                    label="换货单号"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="barterTheme"
                                                    label="主题"
                                                    sortable
                                                    align="center"
                                                    width="160">
                                            </el-table-column>
                                            <el-table-column
                                                    label="客户"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.clientId.clientName" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="对应订单"
                                                    sortable
                                                    align="center"
                                                    width="180">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.orderId.orderTheme" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="换货订单"
                                                    sortable
                                                    align="center"
                                                    width="180">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.barterOrderNo.orderTheme" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="退货日期"
                                                    align="center"
                                                    sortable
                                                    width="130">
                                                <template slot-scope="d">
                                                    {{d.row.barterThtime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="换货日期"
                                                    align="center"
                                                    sortable
                                                    width="130">
                                                <template slot-scope="d">
                                                    {{d.row.barterTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="退入仓库"
                                                    sortable
                                                    align="center"
                                                    width="150"
                                                    prop="barterWarehouse">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="barterState"
                                                    label="换货状态"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="barterGoodsState"
                                                    label="产品状态"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="barterRemark"
                                                    label="备注"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="barterOperator"
                                                    label="负责人"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 850px;;font-size: 13px">
                                        <span>
                                            已开发票:
                                        </span>
                                        <span style="color: #BFBFBF">
                                             106个
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
        </div>
        </div>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js'
    export default {
        name: "ZDindanXq",
        data() {
            return {
                /*对齐方式*/
                labelPosition:'left',
                //订单
                dindanlist:{
                    orderId:0,
                    clientId:{
                        clientId:0,
                        updateTime:'',
                        clientIndustry:'',
                        clientSource:'',
                        clientUrl:'',
                        establishPerson:'',
                        establishTime:'',
                        clientName:'',
                        clientRank:'',
                        clientPhone:'',
                        clientMobile:'',
                        clientSite:'',
                        clientRemark:'',
                        clientPeople:'',
                        clientCjpeople:'',
                        clientState:0,
                        clientIffollowup:0,
                        tfyclueFormsByClueId:'',
                        tfylinkmanFormsByClientId:'',
                        zbartersByClientId:'',
                        zcontractsByClientId:'',
                        zdeliverylogsByClientId:'',
                        zinvoicesByClientId:'',
                        zordersByClientId:'',
                    },
                    conId:{
                        conId:0,
                        busId:null,
                        clientId:null,
                        conNo:null,
                        conTheme:'',
                        conTotal:'',
                        conStarttime:'',
                        conFinishtime:'',
                        conSignatory:'',
                        mySignatory:'',
                        conTime:'',
                        conState:'',
                        conAccessory:'',
                        conRemark:'',
                        conPeople:''
                    },
                    orderNo:'',
                    orderTheme:'',
                    orderTotal:0,
                    orderReturned:0,
                    orderInvoice:0,
                    orderGross:0,
                    orderTime:'',
                    orderWctime:'',
                    orderExchange:'',
                    orderReturn:'',
                    orderState:'',
                    orderRemark:'',
                    orderPeople:'',
                    orderZt:0
                },
                //订单详情
                dindanxqlist:[],
                //交付计划
                jiaofujihua:[],
                //开票记录
                kaipiao:[],
                //回款计划
                hueikuan:[],
                //退款计划
                tueikuan:[],
                //退货
                tueihuo:[],
                //换货
                huanhuo:[],
                activeName2:"first"

            }
        },
        methods: {
            //订单详情方法
            ddxq(){
                this.$axios.get("http://localhost:8088/dindan/list_ddxqcp",{params:{search:this.dindanlist.orderId}})
                    .then(v=>{
                            this.dindanxqlist = v.data;
                        }
                    ).catch()
            },
            //交付计划查询方法
            jfjh(){
                this.$axios.get("http://localhost:8088/jf/jihua_dindan",{params:{search:this.dindanlist.orderId}})
                    .then(v=>{
                            this.jiaofujihua = v.data;
                        }
                    ).catch()
            },
            //开票
            kpjl(){
                window.console.log("aaaaaaaaaaaaaaa")
                this.$axios.get("http://localhost:8088/vue/list_kaipiaodd",{params:{search:this.dindanlist.orderId}})
                    .then(v=>{
                            this.kaipiao = v.data;
                        }
                    ).catch()
            },
            //回款计划
            hkjh(){
                window.console.log("aaaaaaaaaaaaaaa")
                this.$axios.get("http://localhost:8088/dd_hkjh",{params:{search:this.dindanlist.orderId}})
                    .then(v=>{
                            this.hueikuan = v.data;
                        }
                    ).catch()
            },
            //退款
            th(){
                window.console.log("aaaaaaaaaaaaaaa")
                this.$axios.get("http://localhost:8088/thdan/dd_thd",{params:{search:this.dindanlist.orderId}})
                    .then(v=>{
                            this.tueihuo = v.data;
                        }
                    ).catch()
            },
            //换货
            hh(){
                window.console.log("aaaaaaaaaaaaaaa")
                this.$axios.get("http://localhost:8088/huanhuo/dd_hhd",{params:{search:this.dindanlist.orderId}})
                    .then(v=>{
                            this.huanhuo = v.data;
                        }
                    ).catch()
            },
            //退款计划
            tkjh(){
                window.console.log("aaaaaaaaaaaaaaa")
                this.$axios.get("http://localhost:8088/dd_tkjh",{params:{search:this.dindanlist.orderId}})
                    .then(v=>{
                            this.tueikuan = v.data;
                        }
                    ).catch()
            },
        },
        created: function () {
            if(this.$route.query.key!=null){
                this.dindanlist=this.$route.query.key;
                this.ddxq();
                this.jfjh();
                this.kpjl();
                this.th();
                this.hh();
                this.hkjh();
                this.tkjh();
            }
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd  hh:mm:ss");
                } else {
                    return "";
                }
            }
        }
    }
</script>

<style scoped>

    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 50px;
    }
</style>